<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>管理员账号和密码修改</title>
    <meta charset="utf-8"/>
    <script src="js/jquery-3.3.1.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }

        label {
            display: block;
            margin-bottom: 10px;
            color: #555;
            font-weight: bold;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            font-size: 16px;
        }

        .errorMsg {
            color: red;
            margin-top: 5px;
            text-align: center;
            font-size: 20px;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 16px;
        }
    </style>
    <script>
        // 获取页面上的div元素
        var passwordErrorDiv = document.getElementById('passwordError');

        // 清空div元素中的内容
        passwordErrorDiv.innerHTML = '';

        $(function () {
            // 给登录按钮绑定单击事件
            $("#btn_sub").click(function () {
                // 获取密码和确认密码的输入框的值
                var password = $("#password").val();
                var confirmPassword = $("#confirmPassword").val();

                // 检查密码是否一致
                if (password !== confirmPassword) {
                    // 密码不一致，显示错误消息
                    $("#passwordError").html("两次输入的密码不一致");
                    return false; // 停止执行后续代码
                }

                // // 发送ajax请求，提交表单数据
                // $.post("admin/updateUsernameAndPassword", $("#passwordForm").serialize(), function (data) {
                //     if (data != null) {
                //         alert("修改成功！")
                //         location.href = "person.html";
                //     } else {
                //         $("#errorMsg").html(data);
                //     }
                // });
            });
        });
        function back() {
            // 返回上一页
            location.href = "/manage.jsp";
        }
    </script>
</head>
<body>
<div class="container">
    <div class="container">
        <div id="passwordError" class="errorMsg">${errorMsg}</div>
        <h1>管理员账号和密码修改</h1>
        <form id="passwordForm" action="admin/updateUsernameAndPassword" method="post">

            <label for="username">管理员账号:</label>
            <input type="text" id="username" name="username">

            <label for="password">管理员密码:</label>
            <input type="password" id="password" name="password">

            <label for="confirmPassword">确认密码:</label>
            <input type="password" id="confirmPassword" name="confirmPassword">
            <div style="height: 20px"></div>
            <button type="submit" id="btn_sub">保存</button>
            <br>
            <br>
        </form>
<%--        <button type="button" onclick="window.location.href='/manage.jsp'">返回</button>--%>
        <button type="button" onclick="back()">返回</button>
    </div>
</div>
</body>
</html>
